<script lang="tsx">
import useRender from "@/utils/hooks/render";
import { ArrowRight } from "@nutui/icons-vue-taro";
import { PickerOption } from "@nutui/nutui-taro/dist/types/__VUE/picker/types";
import { PageContainer } from "@tarojs/components";
import { computed, inject, ref, toRaw, watch } from "vue";
import MyNutPicker from "./picker/index.vue";

type SelectItem = PickerOption[] | PickerOption[][];

export default {
  name: "select-field",
  props: {
    fieldValue: [String, Array],
    /**用于请求下拉数据 */
    remote: {
      type: Function as unknown as () => () => SelectItem,
    },
    /**本地数据 */
    columns: {
      type: Array as () => SelectItem,
    },
    /**是否多选 */
    multiple: {
      type: Boolean,
      default: false,
    },
    /**是否以弹出方式进行选择 */
    shouldPopup: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, ctx) {
    const pickerRef = ref();
    /**是否打开弹层 */
    const popOpen = ref(false);
    /** */
    const popupValue = computed(
      () =>
        ({
          //多列
          multiple: props.fieldValue,
          // 有children的
          //  "cascade"
          // 单列
          single: [props.fieldValue],
        }[pickerRef.value?.columnsType])
    );
    /**选项配置 */
    const columns = ref<SelectItem>([]);

    // const selectedOpts = ref<PickerOption[]>([]);

    const popupConfirm = ({ selectedValue, selectedOptions }) => {
      console.log("popupConfirm", selectedOptions);

      // selectedOpts.value = toRaw(selectedOptions);
      ctx.emit(
        "field-change",
        {
          multiple: selectedValue,
          single: selectedValue[0],
        }[pickerRef.value?.columnsType]
      );
      popOpen.value = false;
    };

    const cellText = computed(() => {
      return (pickerRef.value?.selectedOptionsSubmit || []).map(
        (el) => el?.text
      );
    });

    const isLoading = ref(false);

    const getRemoteColumns = async () => {
      isLoading.value = true;
      try {
        columns.value = (await props.remote?.()) || [];
      } catch (error) {}
      isLoading.value = false;
    };

    watch(
      () => props.columns,
      (cols) => {
        if (Array.isArray(cols) && !props.remote) columns.value = cols;
      },
      {
        immediate: true,
      }
    );

    // watch([()=>props.fieldValue,()=>pickerRef.value?.columnsType],([fieldValue,columnsType])=>{
    //   let res;

    //   popupValue.value = {
    //     //多列
    //     "multiple" : fieldValue,
    //     // 有children的
    //     //  "cascade"
    //     // 单列
    //      "single": [fieldValue]
    //   }[columnsType]
    // })

    // watch(
    //   [() => pickerRef.value?.columnsList as PickerOption[][], () => props.fieldValue],
    //   ([columns, fieldValue]) => {
    //     console.log("====", columns, fieldValue);
    //     if (columns?.length && fieldValue?.length) {
    //       selectedOpts.value = columns.map(el=>{
    //         return el.find(item=> item.value === f)
    //       })
    //     }
    //   },
    //   {
    //     // immediate: true,
    //     deep: true,
    //   }
    // );

    useRender(() =>
      props.multiple ? (
        //  /* 多选 */
        props.shouldPopup ? (
          <PageContainer>多选待完成</PageContainer>
        ) : (
          <div>多选checkbox未完成</div>
        )
      ) : props.shouldPopup ? (
        <div>
          <div
            class="uno-flex uno-flex-items-center"
            onClick={() => {
              if (!Array.isArray(props.columns)) getRemoteColumns();
              popOpen.value = true;
            }}
          >
            <text class="uno-fs-30 uno-flex-1 ">{cellText.value}</text>
            <ArrowRight />
          </div>
          {/* <nut-popup
            position="bottom"
            visible={popOpen.value}
            onClickOverlay={() => {
              popOpen.value = false;
            }}
          >
            <nut-picker
              modelValue={popupValue.value}
              columns={columns.value}
              onConfirm={popupConfirm}
              onUpdate:modelValue={(e) => {
                popupValue.value = e;
              }}
              onCancel={() => {
                popOpen.value = false;
              }}
            ></nut-picker>
          </nut-popup> */}

          <MyNutPicker
            ref="pickerRef"
            loading={isLoading.value}
            modelValue={popupValue.value}
            open={popOpen.value}
            columns={columns.value}
            onConfirm={popupConfirm}
            //     onUpdate:modelValue={(e) => {
            //       popupValue.value = e;
            //     }}
            onCancel={() => {
              popOpen.value = false;
            }}
          />
        </div>
      ) : (
        <div>单选radio未完成</div>
      )
    );
    return { pickerRef, popupValue, popOpen, cellText };
  },
};
</script>
